<template lang="pug">
  .wrap(@keyup.13="login()")
    .content
      .head
        .logo
        | 信源嗖搜后台系统
      .user
        input(type="text" v-model="userName")
      .password
        input(type="password" v-model="password")
      .identifying
        input(type="text" v-model='verificationCode')
        img.code(src="/xyssoManager/authImage" @click="loadimg()" ref="img")
      .desc(v-show="0==2") 用户名或密码不正确
      .success(@click="login()") 登录
</template>
<script>
  export default {
    name: 'wrap',
    data() {
      return {
        identifying: '',
        verificationCode: '',
        userName: '',
        password: ''
      }
    },
    mounted() {
    },
    methods: {
      async loadimg() {
        this.$refs.img.src = "/xyssoManager/authImage?t=" + new Date()
      },
      async login() {
        let res = await this.$ajax.post('xyssoManager/login/login', {
          password: this.password,
          userName: this.userName,
          verificationCode: this.verificationCode
        })
        let data = res.data
        if (data.code == 200) {
          this.$router.push('/home')
        } else {
          this.$message.error(data.message)
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .wrap
    position relative
    width 100%
    height 100%
    background url(../../assets/login-bg.png) no-repeat
    background-size cover
    .content
      position absolute
      top 25%
      left 50%
      margin-left -150px
      width 300px
      .head
        height 60px
        line-height 60px
        font-size 22px
        color #fff
        .logo
          float left
          width 60px
          height 60px
          margin-right 20px
          background url('../../assets/login-logo.png') no-repeat
          background-size cover
      .user
      .password
        height 40px
        border-radius 5px
        margin-top 18px
        line-height 40px
        overflow hidden
        input
          display block
          height 100%
          border 0
          width 100%
          background #fff url('../../assets/login-user.png') no-repeat
          background-size 14px 14px
          background-position top 13px left 12px
          text-indent 45px
          font-size 14px
          box-sizing border-box
        &.password
          margin-top 28px
          input
            background #fff url('../../assets/login-password.png') no-repeat
            background-position top 13px left 12px
      .identifying
        font-size 0
        margin-top 28px
        input
          display inline-block
          vertical-align top
          width 180px
          height 40px
          line-height 40px
          border 0
          font-size 14px
          text-indent 45px
          border-radius 5px
          background #fff url('../../assets/login-yzm.png') no-repeat
          background-position top 13px left 12px
          box-sizing border-box
        .code
          display inline-block
          height 40px
          width 110px
          margin-left 10px
          background-size cover
          background red
          cursor pointer
      .desc
        font-size 12px
        color #ff0000
        line-height 25px

      .success
        margin-top 25px
        height 50px
        line-height 50px
        border-radius 5px
        background-color #ec6941
        color #ffffff
        letter-spacing 5px
        font-size 18px
        text-align center
        cursor pointer


</style>


